<template>
    <a-modal 
        v-model:open="state.open" 
        :title="state.flag === 'add'?'添加分组':'编辑分组'"
        @ok="handleOk"
        @cancel="cancel"
    >
        <a-form
            ref="formRef"
            :model="state.formState"
            autocomplete="off"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
        >
            <a-form-item
                label="分组名称"
                name="name"
                :rules="[{ required: true, message: '请输入分组名称' }]"
            >
                <a-input v-model:value="state.formState.name" placeholder="请输入分组名称" />
            </a-form-item>
            <a-form-item
                label="备注"
                name="memo"
            >
                <a-input v-model:value="state.formState.memo" placeholder="备注信息" />
            </a-form-item>
            <a-form-item
                label="状态"
                name="status"
            >
                <a-switch 
                    checked-children="启用" 
                    un-checked-children="禁用" 
                    v-model:checked="state.formState.status"                             
                    :checkedValue="StatusEnum.ENABLE" 
                    :unCheckedValue="StatusEnum.DISABLE"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { apiAddFlowGroupPost, apiUpdateFlowGroupPost } from '@/api/flow/wfGroup'
import { showMsg } from '@/utils'
import type { FormInstance } from 'ant-design-vue'
import { StatusEnum } from '@/const'

const emits = defineEmits(['handleQuery'])

const formRef = ref<FormInstance>()
const state = reactive({
    open: false,
    flag:'add',
    formState:{
        name:"",
        memo:"",
        status: StatusEnum.ENABLE //启用
    }
})

const handleOk = async() => {
    await formRef.value?.validate()
    if(state.flag == 'add'){
        const res = await apiAddFlowGroupPost({...state.formState})
    }else{
        const res = await apiUpdateFlowGroupPost({...state.formState})
    }
    emits('handleQuery')
    showMsg('操作成功','success')
    cancel()
}

const cancel = ()=>{
    state.open = false
    state.formState =  { } as any
    state.flag = 'add'
}

const handleOpen = (flag:string,data?:any)=>{
    state.open = true
    state.flag = flag
    console.log(flag,data);
    
    state.formState = {...data}
}

defineExpose({
    handleOpen
})
</script>

<style lang='scss' scoped></style>